<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-card>
        <div class="title">
          <!-- 左边 -->
          <div class="left">
            <el-button type="primary" @click="addFn">添加客户</el-button>
          </div>
          <div class="right">
            <div style="margin-top: 15px;">
              <el-input v-model.trim="inputStr" placeholder="请输入关键字" class="input-with-select">
                <el-select slot="prepend" v-model="select" placeholder="全部经纪" @change="getId">
                  <el-option label="全部经纪" value="0" />
                  <el-option v-for="item in agentsList" :key="item.id" :value="item.id" :label="item.name" />
                </el-select>
                <el-button slot="append" icon="el-icon-search" @click="searchFn" />
              </el-input>
            </div>
          </div>
        </div>
        <div class="content">
          <el-table
            :data="tableData"
            border
            style="width: 100%"
            height="600px"
          >
            <el-table-column
              prop="image"
              label="图片"
              width="180"
              align="center"
            >
              <template v-slot="{row}">
                <el-image
                  style="width: 100px; height: 100px"
                  :src="row.image"
                />
              </template>
            </el-table-column>
            <el-table-column
              prop="name"
              label="名称"
              width="180"
              align="center"
            />
            <el-table-column
              prop="email"
              label="邮箱"
              align="center"
            />
            <el-table-column
              prop="phone"
              label="电话"
              width="180"
              align="center"
            />
            <el-table-column
              prop="agent.name"
              label="经纪"
              width="180"
              align="center"
            />
            <el-table-column
              prop="wechat"
              label="微信"
              align="center"
            />
            <el-table-column
              prop="desc"
              label="介绍"
              width="180"
              align="center"
            />
            <el-table-column
              label="操作"
              width="180"
              align="center"
            >
              <template v-slot="{row}">
                <el-button type="primary" @click="editFn(row.id)">编辑</el-button>
                <el-button type="danger" @click="delFn(row.id)">删除</el-button>
              </template>

            </el-table-column>
          </el-table>
        </div>
        <!-- 分页器 -->
        <el-pagination
          align="center"
          :current-page="page"
          :page-sizes="[5, 10, 20, 50]"
          :page-size="pagesize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
        <!-- 弹窗显示隐藏11 -->
        <Dialog ref="Dialog" :show-dialog.sync="showDialog" :agents-list="agentsList" @getClient="getClient" />
      </el-card>
    </div>
  </div>
</template>

<script>
import { getClientsList, getClientsNumber, getAgentsList, delClients } from '@/api/client'
import Dialog from './components/Dialog'
export default {
  components: {
    Dialog
  },
  data() {
    return {
      tableData: [], // 客户列表
      total: 0, // 客户数量
      page: 1, // 当前绑定的页数
      pagesize: 5, // 每页展示的数量
      showDialog: false, // 弹窗显示隐藏
      agentsList: [],
      select: '', // 选择得经纪
      searchStr: '', // 搜索的数据
      id: '0', // id为0 是获取所有数据
      inputStr: ''
    }
  },
  async created() {
    // 获取经纪人信息
    // this.$refs.Dialog.getAgentsList()
    // 获取经纪列表
    this.agentsList = await getAgentsList()
    console.log(99, this.agentsList)
    // 获取客户数量
    this.getClientsNumber()
    // 调用获取客户列表的方法
    await this.getClientsList()
  },
  methods: {
    getClient() {
      this.getClientsList()
      this.getClientsNumber()
    },
    // 搜索框搜索功能
    async searchFn() {
      this.searchStr = this.inputStr
      console.log(140, this.id)
      // 当选择为全部经纪人时
      if (this.id === '0') {
        if (this.searchStr === '') {
          // 获取全部数据
          this.getClient()
        } else {
          const res = await getClientsList({
            name_contains: this.searchStr,
            _limit: this.pagesize,
            _start: this.pagesize * (this.page - 1)
          })
          // console.log(90, res)
          this.tableData = res
          this.total = await getClientsNumber({
            name_contains: this.searchStr
          })
        }
        // console.log('选择为全部经纪人', this.id)
      } else {
        if (this.searchStr === '') {
          // return this.$message.info('请输入关键字！')
          // await getClientsList()
          // 获取该经纪下的所有客户
          const res = await getClientsList({
            _limit: this.pagesize,
            _start: this.pagesize * (this.page - 1),
            // name_contains: this.searchStr,
            agent: this.id
          })
          this.tableData = res

          this.total = await getClientsNumber({
            name_contains: this.searchStr,
            agent: this.id
          })
        } else {
          const res = await getClientsList({
            name_contains: this.searchStr,
            agent: this.id,
            _limit: this.pagesize,
            _start: this.pagesize * (this.page - 1)
          })
          // console.log(90, res)
          // 判断下数据是否为空
          // if (res) {
          this.tableData = res
          // this.total = res.length
          this.total = await getClientsNumber({
            // name_contains: this.searchStr,
            name_contains: this.inputStr,
            agent: this.id
          })
          // } else {
          // 如果数据为空,显示0
          //   this.tableData = []
          //   this.total = 0
          // }
        }
      }
    },
    // 获取客户长度
    // 获取经纪id
    getId(item) {
      this.id = item.toString()
      console.log(150, this.id)
    },
    // 获取经纪列表
    async getAgentsList() {
      const res = await getAgentsList()
      console.log(119, res)
      this.agentsList = res
    },
    // 获取客户数量
    async getClientsNumber() {
      const res = await getClientsNumber()
      // console.log(154, res)
      this.total = res
    },
    // 删除用户
    async delFn(id) {
      // this.$refs.Dialog.delClients(id)
      // await this.getClientsList()
      this.$confirm('此操作将永久删除该用户, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        center: true,
        type: 'warning'
      }).then(async() => {
        await delClients(id)
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
        // 当我们删除最后一条数据的时候，需要请求上一页的数据，这样才能获取到数据并渲染出来
        // 当前页不能是第一页
        if (this.tableData.length === 1 && this.page > 1) {
          this.page--
        }
        //   请求数据 渲染页面
        this.getClientsList()
        this.getClientsNumber()
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    // 新增按钮
    addFn() {
      this.showDialog = true
    },
    // 编辑按钮
    editFn(id) {
      // console.log(108, id)
      this.showDialog = true
      // 调用编辑函数
      this.$refs.Dialog.getClientsDetail(id)
    },
    // 获取客户列表
    async getClientsList() {
      // 调用获取客户列表的接口

      // 当id存在 意味着进行搜索行为
      if (this.id !== '0') {
        console.log('筛选')
        const res = await getClientsList({
          _limit: this.pagesize,
          _start: this.pagesize * (this.page - 1),
          name_contains: this.searchStr
          // agent: this.id
        })
        this.tableData = res
      } else {
        // 当id为空  直接求全部的数据
        const res = await getClientsList({

          _limit: this.pagesize,
          _start: this.pagesize * (this.page - 1),
          name_contains: this.searchStr
          // agent: this.id
        })
        this.tableData = res
        console.log('获取所有数据')
        console.log(285, '数据', this.searchStr, this.id)
      }
      // const res = await getClientsList({
      //   _limit: this.pagesize,
      //   _start: this.pagesize * (this.page - 1)
      // })
      // this.tableData = res
    },
    // 分页函数
    handleSizeChange(size) {
      // console.log(`每页 ${val} 条`)
      // 每页展示的数量
      this.pagesize = size
      this.getClientsList()
    },
    handleCurrentChange(page) {
      // 当前的页码数
      this.page = page
      this.getClientsList()
      console.log(303, '页码数', this.page, this.id, this.searchStr)
    }
  }
}
</script>

<style lang="scss">
.title{
  display: flex;
  justify-content: space-between;
  margin: 10px 0;
  line-height: 40px;
  .left{
  padding-top: 15px;
  }
  .right{
    margin-bottom: 15px;
  .el-select .el-input {
    width: 130px;
  }
  .input-with-select .el-input-group__prepend {
    background-color: #fff;
  }
  }
}

</style>

